<template>
  <div class="body">
    <div id="wrap">
      <div id="firstHeader" class="titlebar activebar">
        <div class="egret-header topbar normalHeader">
          <div class="egret-header-box egret-img fl" @click="$router.go(-1)">
            <img src="../style/img/ic-back.png">
          </div>
          <div class="egret-header-box">
            <div class="egret-header-search">
              <img src="../style/img/4-header_search.png" alt>
              <input type="text" placeholder="搜索動態">
            </div>
            <button class="btn-search" @click="search">搜索</button>
          </div>
        </div>
      </div>
    </div>
    <div class="state-list">
      <div class="list-content">
        <div class="list">
          <div class="left-text">
            <p class="state-name">
              {{name}}
            </p>
            <p class="msg">
              <span>{{society}}</span>
              <span>{{time}}</span>
            </p>
          </div>
          <div class="right-pic">
            <img src="../style/img/1.png" alt="">
          </div>
        </div>
        <div class="list">
          <div class="left-text">
            <p class="state-name">
              {{name}}
            </p>
            <p class="msg">
              <span>{{society}}</span>
              <span>{{time}}</span>
            </p>
          </div>
          <div class="right-pic">
            <img src="../style/img/1.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistoryState',
  data () {
    return {
      name: '公益金五十週年百萬行中環及 灣仔繞道',
      society: '香港青年協會',
      time: '9小時前'
    }
  },
  methods: {
    search () {

    }
  }
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 800px;
  background: #fff;
}
#firstHeader {
  background-color: #e6ecf0;
}
.egret-header-box {
  height: 50px;
}

.egret-img img {
  height: 4.3rem;
  padding: 8px;
}
.at-content {
  position: relative;
  left: 20px;
}
.egret-header-search {
  display: inline-block;
  width: 200x;
  background-color: #e5e5e5;
  position: absolute;
  left: 50px;
  right: 80px;
  height: 34px;
  margin-top: 8px;
  border-radius: 4px;
}

.egret-header-search img {
  margin-left: 15px;
  height: 20px;
  margin-top: 7px;
}

.egret-header-search input {
  width: 160px;
  background-color: #e5e5e5;
  line-height: 24px;
  font-size: 15px;
  padding-top: 5.5px;
  border: none;
  outline: none;
}
.topbar {
  /* background-color: #ffffff; */
  height: 50px;
  position: relative;
}
.fl {
  float: left;
}
.btn-search {
  width: 60px;
  height: 30px;
  padding: 6px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  line-height: 20px;
  background: rgb(249, 119, 130);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  border: none;
  font-size: 16px;
  color: white;
  outline: none;
}
.state-list {
  width: 100%;
  padding: 10px;
}
.list {
  width: 100%;
  height: 120px;
  border-bottom: 2px dashed #000;
  margin-top: 8px;
}
.left-text  {
  width: 200px;
  float: left;
}
.state-name {
  font-size: 16px;
  color: rgba(22, 22, 22, 1);
  width:206px;
  height: 45px;
  font-weight: 600;
  margin-top: 10px;
}
.msg {
  color: rgba(0, 0, 0, 0.39);
  font-size:13px;
}
.msg span:nth-child(2) {
  margin-left: 20px;
}
.right-pic {
  float: right;
  margin-top: 10px;
}
.right-pic img {
  width: 105px;
  height: 76px;
}
</style>
